<template>
  <div id="tradingRecord2">
    <div class="title2">
      <img src="../../assets/img/jiaoyijilu.png" alt />
      <div>
        <p>投注记录</p>
        <p>当前系统支持查询最近30日的合约账单记录</p>
      </div>
    </div>
    <div class="timer">
      <div class="time-left">
        <span>日期</span>
        <el-date-picker
          size="small"
          v-model="time"
          type="daterange"
          range-separator="-"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        ></el-date-picker>
        <el-button-group style="margin:0 10px">
          <el-button size="small" plain>今日</el-button>
          <el-button size="small" plain>昨日</el-button>
          <el-button size="small" plain>近七日</el-button>
          <el-button size="small" plain>近30日</el-button>
        </el-button-group>
      </div>
      <div class="time-right">
        <span class="search">查询</span>
        <span class="reset">重置</span>
      </div>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="待定注码" name="first">
        <el-table :data="tableData1" style="width: 100%">
          <el-table-column prop="date" label="日期" min-width="100"></el-table-column>
          <el-table-column prop="date" label="订单号" min-width="100"></el-table-column>
          <el-table-column prop="date" label="交易类型" min-width="100"></el-table-column>
          <el-table-column prop="date" label="金额" min-width="100"></el-table-column>
          <el-table-column prop="date" label="交易前" min-width="100"></el-table-column>
          <el-table-column prop="date" label="交易后" min-width="100"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="交易记录" name="second">
        <el-table :data="tableData1" style="width: 100%">
          <el-table-column prop="date" label="日期" min-width="100"></el-table-column>
          <el-table-column prop="date" label="订单号" min-width="100"></el-table-column>
          <el-table-column prop="date" label="交易类型" min-width="100"></el-table-column>
          <el-table-column prop="date" label="金额" min-width="100"></el-table-column>
          <el-table-column prop="date" label="交易前" min-width="100"></el-table-column>
          <el-table-column prop="date" label="交易后" min-width="100"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: "tradingRecord2",
  data() {
    return {
      time: "",
      activeName: "first",
      tableData1: [],
      tableData2: [],
      type:""
    };
  },
  methods: {}
};
</script>
<style lang='less' scope>
#tradingRecord2 {
  >.title2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    > div {
      padding: 0 10px;
      > p:first-child {
        font-size: 15px;
        color: #dcb884;
      }
      > p:last-child {
        font-size: 14px;
        color: #a1b1b0;
        margin-top: 5px;
      }
    }
  }
  .timer {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .time-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      > span:first-child {
        font-size: 14px;
        color: #a1b1b0;
        margin-right: 10px;
      }
      //   ----------------------
      .el-button.is-plain:focus,
      .el-button.is-plain:hover {
        border: 1px solid #dcb884;
        color: #dcb884;
      }
    }
    .time-right {
      .search {
        background-image: linear-gradient(to right, #cfa66e, #fbe0b8);
        padding: 8px 25px;
        color: #fff;
        font-size: 12px;
        border-radius: 4px;
        margin-left: 10px;
      }
      .reset {
        padding: 8px 25px;
        color: #344e50;
        font-size: 12px;
        border-radius: 4px;
        margin-left: 10px;
        border: 1px solid #e6e6e6;
      }
    }
  }
  //   -----------------------------
  .el-tabs__nav-scroll {
    background-color: #f7f8f8;
  }
  .el-tabs__nav-wrap::after {
    height: 0;
  }
  .el-tabs__active-bar {
    height: 0;
  }
  .el-tabs__item {
    color: #a1b1b0;
    padding: 0 10px;
  }
  .el-tabs__item.is-active {
    color: #dcb884;
  }
  .el-table__empty-text {
  height: 220px;
  padding-top: 150px;
  font-size: 14px;
  background: url("../../assets/img/zanwushuju.png") no-repeat center center;
  background-size: 15%;
}
}
</style>